
<!DOCTYPE html public>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

    <link href="css/styleSliders.css" rel="stylesheet" type="text/css" ></img>
    <link href="css/styleBaWue.css" 
          rel="stylesheet" type="text/css"></img>
    <link rel="shortcut icon" type="image/jpg" href="./favicon.jpg">
    <script type="text/javascript" 
            src="js/jquery-1.12.4.min.js">
    </script>

    
    <title> Verkehrsbeeinflussung: Baustelle</title>
</head>


<body>
  
<!-- ############################################## -->
<!-- outer container                                -->
<!-- ############################################## -->

<div id="container">



<!-- ############################################## -->
<!-- header: title image loaded as background image via css -->
<!-- ############################################## -->


<!-- ############################################## -->
<!-- image Buttons                                        -->
<!-- ############################################## -->


<div id="infoDiv"><a href="info/info_RoadWorks_BaWue_ger.html">
    <img width="100%" src="figs/infoBlue.png"></img></a>
     <!--src="figs/infoBlue.png" onclick="showInfo()"></img>-->
</div>


<div id="startStopDiv"><img id="startStop" width="100%" 
     src="figs/buttonStop3_small.png" onclick="myStartStopFunction()"></img>
</div>

<div id="restartDiv"><img id="restart" width="100%" 
     src="figs/buttonRestart_small.png" onclick="myRestartFunction()"></img>
</div>

<!--
<div id="infoDiv"><img width="100%" 
     src="figs/infoBlue.png" onclick="showInfo()"></img>
</div>
-->

<div id="lanePlusDiv"><img width="100%" 
     src="figs/autobahn_plus.png" onclick="addOneLane()"></img>
</div>

<div id="laneMinusDiv"><img width="100%" 
     src="figs/autobahn_minus.png" onclick="subtractOneLane()"></img>
</div>



<!-- redirects to other scenarios, defines myRedirectX -->
<script src="js/redirect_ger.js" type="text/javascript"></script>

<div id="scenarios">
<center>
<img width="25%" src="figs/iconRampmeterFig_small.jpg" 
                 onclick="myRedirectOnrampBaWue()"></img>
&nbsp;
<img width="23%" src="figs/iconRoadworksFig_small.jpg" 
                 onclick="myRedirectRoadworksBaWue()"></img>
&nbsp;
<img width="27%" src="favicon.jpg" 
                 onclick="myRedirectOnramp()"></img>
</center>
</div> 


<!-- ############################################## -->
<!-- the actual simulation canvas -->
<!-- ############################################## -->

<!--  !!!  NO comments inside canvas spec, leads to DOS!!! -->
<!-- no width, height spec in canvas; overridden anyway -->

<div id="contents">
  <canvas id="canvas" 
          onmouseenter="handleMouseEnter(event)"
          onmousemove="handleMouseMove(event)"
          onmousedown="handleMouseDown(event)"
          onmouseup="handleMouseUp(event)" 
          onclick="handleClick(event)"
          onmouseout="cancelActivities(event)"
          style="border:1px solid #d3d3d3;">

    Your browser does not support the HTML5 canvas tag.
  </canvas>
</div>





<!-- ################################################# -->
<!-- Copyright/impressum                               -->
<!-- ################################################# -->

<!--
<div id="impressum"> <a href="impressum.html">
  &copy; Martin Treiber</a></div>
-->

<!-- ################################################# -->
<!-- Sliders
<!-- ################################################# -->

<div id="sliders">
<center>

<!-- ######################################################## -->
<h3>Verkehrsfl&uuml;sse und Allgemeines</h3>
<!-- ######################################################## -->

<table id="mainTable" border="0" cellspacing="1" cellpadding="0" >



<tr>
  <td>LKW-Anteil</td>
  <td> <input id="slider_fracTruck" type="range" 
              min="0" max="50" step="1"></td>
  <td> <div id="slider_fracTruckVal"></div> </td>
</tr>

<tr>
  <td>Hauptzufluss</td>
  <td> <input id="slider_qIn" type="range" 
              min="0" max="2400" step="10"></td>
  <td> <div id="slider_qInVal"></div> </td>
</tr>

<tr>
  <td>Zeitraffer</td>
  <td> <input id="slider_timewarp" type="range" 
              min="0.2" max="20" step="0.1"></td>
  <td> <div id="slider_timewarpVal"></div> </td>
</tr>
</table>

<!-- ######################################################## -->
<h3>Fahrzeugfolge-Verhalten</h3>
<!-- ######################################################## -->

<table id="mainTable" border="0" cellspacing="1" cellpadding="0" >

<tr>
  <td>Wunschgeschw. v</sub>0</td>
  <td> <input id="slider_IDM_v0" type="range" 
              min="20" max="160" step="1"></td>
  <td> <div id="slider_IDM_v0Val"></div> </td>
</tr>

<!--
<tr>
  <td>Zeitl&uuml;cke T</td>
  <td> <input id="slider_IDM_T" type="range" 
              min="0.6" max="3" step="0.1"></td>
  <td> <div id="slider_IDM_TVal"></div> </td>
</tr>

<tr>
  <td class="important">Max Beschl a</td>
  <td> <input id="slider_IDM_a" type="range" 
              min="0.3" max="4" step="0.1"></td>
  <td> <div id="slider_IDM_aVal"></div> </td>
</tr>

-->

</table>

</div> <!-- end <div id="sliders"> -->

<!-- ############################################## -->
<!-- colorbox
<!-- ############################################## -->


<div id="colorBox"> 
<img src="figs/colormap_grass.png" width="100%"></img>
</div>




<!-- ########################################################## -->
<!-- specific scripts; position below any simulation elements  -->
<!-- ########################################################## -->

<script src="js/seedrandom.min.js"></script> <!-- random w seed debug -->


<script src="js/control_gui_ger.js"></script> 
<script src="js/timeView_ger.js" type="text/javascript"></script>
<script src="js/displayText.js" type="text/javascript"></script>
<script src="js/media.js" type="text/javascript"></script>

<script src="js/canvas_gui.js"></script> 
<!--<script src="js/SpeedFunnel.js"></script> -->
<script src="js/TrafficObjects.js"></script> 
<script src="js/TrafficLightControlEditor.js"></script> 
<script src="js/colormanip.js"></script>

<script src="js/models.js"></script> 
<script src="js/vehicle.js"></script>

<script src="js/paths.js"></script>
<script src="js/road.js"></script>
<script src="js/stationaryDetector_ger.js"></script> 

<!-- PROJ--> <script src="js/roadworks_BaWue.js"></script> 

</body>
</html>
